import Base from '@/components/Base';
import { Button, Card, Slider, Row, Col, Typography, Divider } from 'antd';
import { KayButton } from '@/components/KayUI';
import webGlControl from './control';
import styles from './index.less';

const { Title, Paragraph, Text } = Typography;

interface State {}

export default class Index extends Base<any, State> {
  public state: State = {};

  public async didShow() {}

  public async didMount() {
    // console.log('history', this.navigator.history)
    webGlControl.init();
  }

  public willUnmount() {
    webGlControl.destroy();
  }

  public render() {
    const {} = this.state;
    return (
      <Card title="">
        <Divider />

        <Typography>
          <Title>粒子波浪</Title>
          <Paragraph>
            <p>
              先循环生成一个50*50的粒子矩阵，利用
              <Text code>
                setAttribute('position', new
                Three.Float32BufferAttribute(starArr, 3))
              </Text>
              设置每个粒子的位置。
            </p>
            <p></p>
          </Paragraph>
          <Title level={3}>问题</Title>
          <Paragraph>
            <p>
              1、没法单独设置粒子大小，现在只能一起变（但是可以用ShaderMaterial，GPU控制）
            </p>
            <p>
              材质是针对整个粒子系统设置的，所以只能维护粒子位移。如果要维护粒子颜色、尺寸呢？
            </p>
            <p>我们必须为每个粒子设置不同的材质，由此也造成不小的性能损耗</p>
            <p>
              参考：
              <a href="https://www.shuzhiduo.com/A/pRdBB2M9dn/" target="_blank">
                https://www.shuzhiduo.com/A/pRdBB2M9dn/
              </a>
            </p>
          </Paragraph>
        </Typography>

        <div
          className={styles.canvasBox}
          id="WebGL-wave-points-test"
          style={{ height: '600px' }}
        />
      </Card>
    );
  }
}
